<template>
	<view class="homePage">
		<view class="homePage-logo">
			<u-image src="@/static/image/logo2.png" mode="" width="260rpx" height="260rpx"></u-image>
		</view>

		<view class="homePage-phone" v-if="isGetPhone === true">
			<view class="homePage-phone-left">
				<view class="homePage-phone-logo">
					<u-image src="@/static/image/logo3.png" shape="circle" mode="" width="80rpx"
						height="80rpx"></u-image>
				</view>
				<view class="homePage-phone-text">
					未登录
				</view>
			</view>
			<u-button type="primary" shape="circle" @click="toLoginPage">授权手机登录</u-button>
		</view>

		<view class="homePage-voucher" v-if="isGetPhone === false">
			<view class="" style="display: flex;align-items: center;">
				<u-image src="@/static/image/quan.png" width="80rpx" height="80rpx"></u-image>
				<view class="homePage-voucher-text">
					快手团购券
				</view>
			</view>

			<view class="homePage-voucher-btn" @click="toVoucher">
				<view class="">
					有{{voucherNum}}张待使用
				</view>
				<u-icon name="arrow-right" size="28rpx" style="margin-left: 10rpx;" color="#fff"></u-icon>
			</view>
		</view>

		<view class="homePage-voucher2">
			点击待使用，去使用后填写时间地址预约上门取送服务，足不出户享受精致洗护
		</view>

		<view class="homePage-notice">
			<u-image class="notice-icon" src="@/static/image/lingdang.png" width="100rpx" height="100rpx"></u-image>
			<view class="homePage-notice-header">
				温馨提示
			</view>
			<view class="homePage-notice-text">
				亲爱的用户：
			</view>
			<view class="homePage-notice-text">
				1.本小程序只支持核销用户在快手购买的团购券，请前往快手【团购.优惠】中进行下单;
			</view>
			<view class="homePage-notice-text">
				2.为了给您更好的使用体验，核销时小鲸洗将获取您的快手信息，用于查询可用团购券及分配洗护工厂;
			</view>
			<view class="homePage-notice-text">
				3.本小程序只支持核销用户在快手购买的小鲸洗团购券，不支持核销用户通过其他方式获取的小鲸洗优惠券，
			</view>
			<view class="homePage-notice-text">
				4.若在核销过程中遇到问题，可联系客服：400-6199990。
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		components: {

		},
		onShow() {
			setTimeout(() => {
				this.loadVoucher()
			}, 100)
		},
		watch: {
			isGetPhone(newVal) {
				if (newVal === false) {
					this.loadVoucher()
				}
			}
		},
		computed: {
			...mapState({
				isGetPhone: (state) => {
					return state.isGetPhone
				},
				voucherNum: (state) => {
					return state.voucherNum
				}
			})
		},
		methods: {
			loadVoucher() {
				this.$u.api
					.postFindVaildVoucherList({
						page: 1,
						rows: 999
					}).then(res => {
						this.$store.commit('setVoucherNum', res.data.total)
					})
			},
			toLoginPage() {
				uni.navigateTo({
					url: '/pages/login'
				})
			},
			toVoucher() {
				uni.navigateTo({
					url: '/pages/me/order/voucher'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homePage {
		width: 100vw;
		min-height: 100vh;
		// background-image: linear-gradient(45deg, #FFFEFF 0%, #D7FFFE 100%);
		background-image: linear-gradient(45deg, #FFFEFF 0%, #D7FFFE 70%, #D7FFFE 100%);

		padding-top: 10vh;
		padding-bottom: 30rpx;
	}

	.homePage-logo {
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.homePage-phone {
		margin: 38rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		border: solid 1px #e9e9e9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;

		&-left {
			display: flex;
			align-items: center;
		}

		&-text {
			font-size: 36rpx;
			font-weight: 900;
			margin-left: 30rpx;
		}

		&-logo {
			background-color: #3E9B9B;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.homePage-voucher {
		margin: 38rpx 38rpx 64rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
		opacity: 0.7;

		&-text {
			font-style: italic;
			color: #ea986c;
			font-size: 38rpx;
			font-weight: 900;
			margin-left: 30rpx;
		}

		&-btn {
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #ff8177;
			padding: 0 30rpx;
			line-height: 80rpx;
			color: #fff;
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}


	}

	.homePage-notice {
		padding: 30rpx;
		border-radius: 20rpx;
		border: solid 1rpx #69EAF9;
		background-color: rgba(152, 245, 252, 0.2);
		position: relative;
		margin: 0 38rpx;
		padding-bottom: 10rpx;

		&-header {
			font-size: 38rpx;
			color: #0EB6A5;
			font-weight: 900;
			text-align: center;
			font-style: italic;
			margin-bottom: 30rpx;
		}

		&-text {
			font-size: 30rpx;
			color: #8f8f8f;
			padding-bottom: 28rpx;
			line-height: 48rpx;
		}
	}

	.notice-icon {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.homePage-voucher2 {
		margin: 38rpx 38rpx 64rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-image: linear-gradient(135deg, #81FFEF 10%, #e9defa 100%);
		font-size: 30rpx;
	}
</style>